<template>
	<view class="page-content">
		<u-navbar autoBack title="我的收货地址" bgColor="#D9EDD4" fixed placeholder safeAreaInsetTop></u-navbar>

		<view class="container">
			<view class="content-center">
				<view class="address-item">
					<view class="address-left">
						<u-avatar size="42" :text="userInfo.username.slice(0,1)" fontSize="18" randomBgColor></u-avatar>
						<view class="userInfo">
							<view class="userInfo-top">
								<view class="userName">{{userInfo.username}}</view>
								<view class="phone">{{userInfo.phone}}</view>
							</view>
							<view class="userInfo-btm">
								{{userInfo.address}}
							</view>
						</view>
					</view>
					
					<u-icon size="22" name="edit-pen" @click="gonavigate('editAddress?userId='+userId)"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				userInfo: [],
			}
		},
		onLoad(e) {
			this.userId = e.userId
		},
		onShow() {
			uni.request({
				url:"http://localhost:3000/user/getUsersById",
				data:{
					userId: this.userId
				},
				success:(res)=>{
					this.userInfo = res?.data?.data;
				}
			})
		},
		methods:{
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-content{
		padding: $uni-spacing-col-base $uni-spacing-row-lg;
		.container{
			.content-center{
				.address-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 $uni-spacing-row-sm;
					.address-left{
						display: flex;
						align-items: center;
						.userInfo{
							display: flex;
							flex-direction: column;
							padding: 0 $uni-spacing-row-base;
							.userInfo-top{
								display: flex;
								align-items: center;
								.userName{
									font-size: $uni-font-size-base;
									color: $uni-text-color;
								}
								.phone{
									font-size: $uni-font-size-base;
									color: $uni-text-color-grey;
								}
							}
							.userInfo-btm{
								font-size: $uni-font-size-base;
								color: $uni-text-color-grey;
							}
						}
					}
				}
			}
		}
	}
</style>